<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>楼盘</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body style="overflow-x: hidden">
<!--引入导航栏-->
<nav th:replace="~{topbar::top}"></nav>

<form id="select_form" action="/estate_list" method="post">
    <!-- 图片和搜索框 -->
    <div class="jumbotron" style="padding-top: 40px;  height: 10rem; background-image: url(images/back01.jpg);">
        <div class="container">
            <div class="row" style="text-align: center;">
                <div class="form-group col-md-1" >
                    <input type="text" style="width: 590px" class="form-control" id="search" placeholder="请输入你要查找的小区" name="estateName" th:value="${select.estateName}" >
                    <input type="hidden" id="order" name="order" th:value="${select.order}">
                </div>
                <button type="submit" class="btn btn-default" aria-label="Left Align" style="">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>

    <!-- 条件选择区域 -->
    <div style=" margin-left:30px; background-color: ghostwhite ">
        <div class="container">
            <div class="row">
                <div class="checkbox">
                    <b style="padding-right: 30px">位置</b>
                    <label class="checkbox-inline" style="padding-right: 90px">
                        <input type="checkbox" name="city" value="成都" th:text="成都" th:unless="${select.cityContain('成都')}">
                        <input type="checkbox" name="city" value="成都" th:text="成都" checked="checked" th:if="${select.cityContain('成都')}">
                    </label>
                    <label class="checkbox-inline" style="padding-right: 60px">
                        <input type="checkbox" name="city" value="广州" th:text="广州" th:unless="${select.cityContain('广州')}">
                        <input type="checkbox" name="city" value="广州" th:text="广州" checked="checked" th:if="${select.cityContain('广州')}">
                    </label>
                </div>
                <div class="container" style="text-align: right;">
                    <input class="btn btn-primary" type="submit" value="搜索"/>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- 列表选项栏 -->
<script>
    function sortByDefault() {
        document.getElementById("order").value="default";
        var form = document.getElementById("select_form");
        form.submit();
    }
    function sortByAvgPrice() {
        document.getElementById("order").value="avg_price";
        var form = document.getElementById("select_form");
        form.submit();
    }
</script>
<div class="container text-center" style="padding-top: 30px; padding-bottom:30px; margin: auto; top: 0; bottom: 0; left: 0; right: 0">
    <div class="row">
        <ul>
            <li th:if="${select.order eq 'default'}" class="col-md-2" style="list-style: none; background: lightgreen" onclick="sortByDefault(this)" id="paixu"><h4 style="color: black; text-decoration: none; display: inline-block; width: 150px; height: 20px" th:text="默认排序"/></li>
            <li th:unless="${select.order eq 'default'}" class="col-md-2" style="list-style: none" onclick="sortByDefault(this)" id="paixu"><h4 style="color: black; text-decoration: none; display: inline-block; width: 150px; height: 20px" th:text="默认排序"/></li>

            <li th:if="${select.order eq 'avg_price'}" class="col-md-2" style="list-style: none; background: lightgreen" onclick="sortByAvgPrice(this)" id="zongjia"><h4 style="color: black; text-decoration: none; display: inline-block; width: 150px; height: 20px" th:text="均价"/></li>
            <li th:unless="${select.order eq 'avg_price'}" class="col-md-2" style="list-style: none" onclick="sortByAvgPrice(this)" id="zongjia"><h4 style="color: black; text-decoration: none; display: inline-block; width: 150px; height: 20px" th:text="均价"/></li>
        </ul>
    </div>
    <div class="container" style="padding-left: 25px"><hr style="background-color: lightgreen; height: 2px; margin: unset; border: unset"></div>
</div>

<!-- 楼盘列表 -->
<div class="container">
    <div class="col-md-12">
        <h3><b>共找到</b><span style="color: #34ce57" th:text="${pageDTO.page.total}">30</span><b>个楼盘</b></h3>
    </div>
</div>
<div class="container" style="padding-left: 25px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>

<div class="container" style="padding-left: 25px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
<div class="container">

    <div class="row" th:each="estate:${pageDTO.result}">
        <div class="col-md-9">
            <ul>
                <li class="row" style="list-style: none; padding: 30px">
                    <img class="col-md-4" src="house03.jpg" th:src="${estate.picture}">
                    <div class="col-md-8">
                        <h3><a style="color: black; text-decoration: none; font-weight: bold" href="#4" th:href="@{'/estate_detail?estateId='+${estate.estateId}}" th:text="${estate.estateName}">南湖国际社区</a></h3>
                        <div class="row">
                            <h5 class="col-md-12">
                                <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                                <a style="color: black; text-decoration: none" th:text="${estate.position}">天府新区南湖</a>
                            </h5>
                        </div>
                        <div class="row">
                            <h5 class="col-md-12">
                                <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                <span th:text="${estate.buildingYear}">2010年建成</span>
                            </h5>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-md-3" style="padding-top: 40px">
            <div class="container" style="list-style: none">
                <h2 style="color: #db4c3f; font-weight: bold; display: inline" th:text="${estate.avgPrice}">16600</h2>
                <h5 style="display: inline">元/平米</h5>
            </div>
            <div class="container" style="display: block; list-style: none; color: grey; margin-left: 5px; font-size: 10px">二手房参考均价</div>
        </div>
        <hr style="background-color: aliceblue; height: 2px; width: 1130px; margin: unset; border: unset">
    </div>
</div>

<!-- 分页条 -->
<div class="container">
    <div class="row">
        <nav style="text-align: right" aria-label="Page navigation">
            <ul class="pagination">
                <li th:unless="${pageDTO.page.hasPrevious()}">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true" th:text="首页"></span>
                    </a>
                </li>
                <li th:if="${pageDTO.page.hasPrevious()}">
                    <a aria-label="Previous" onclick="firstPage()">
                        <span aria-hidden="true" th:text="首页"></span>
                    </a>
                </li>

                <li >
                    <a href="#" aria-label="Previous" th:unless="${pageDTO.page.hasPrevious()}">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li >
                    <a aria-label="Previous" onclick="prePage()" th:if="${pageDTO.page.hasPrevious()}">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>

                <li ><a style="color: black" th:text="' 第 '+${pageDTO.page.getCurrent()}+' 页/共 '+${pageDTO.page.getPages()}+' 页 '"/></li>

                <li >
                    <a href="#" aria-label="Next" th:unless="${pageDTO.page.hasNext()}">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li >
                    <a aria-label="Next" onclick="nextPage()" th:if="${pageDTO.page.hasNext()}">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>

                <li th:unless="${pageDTO.page.hasNext()}">
                    <a href="#">
                        <span aria-hidden="true" th:text="末页"></span>
                    </a>
                </li>
                <li th:if="${pageDTO.page.hasNext()}">
                    <a aria-label="Next" onclick="lastPage()">
                        <span aria-hidden="true" th:text="末页"></span>
                    </a>
                </li>

                <script th:inline="javascript" >
                    function nextPage() {
                        var form = document.getElementById("select_form");
                        document.getElementById("select_form").action='/estate_list?page=' + '[[${pageDTO.page.getCurrent()+1}]]';
                        form.submit();
                    }
                    function prePage() {
                        var form = document.getElementById("select_form");
                        document.getElementById("select_form").action='/estate_list?page=' + '[[${pageDTO.page.getCurrent()-1}]]';
                        form.submit();
                    }
                    function firstPage() {
                        var form = document.getElementById("select_form");
                        form.action='/estate_list';
                        form.submit();
                    }
                    function lastPage() {
                        var  form = document.getElementById("select_form");
                        form.action='/estate_list?page='+'[[${pageDTO.page.getPages()}]]';
                        form.submit();
                    }

                </script>
            </ul>
        </nav>
    </div>
</div>

</body>
</html>